<template>
  <div @click="$router.push(`/ArticleDetail/${artObj.art_id}`)" >
    <van-cell>
    <template #title>
      <div class="title-box" >
        <span>{{ artObj.title }}</span>
        <img  v-if="artObj.cover.type === 1"
        class="thumb"
        v-lazy="artObj.cover.images[0]">
      </div>
      <div v-if="artObj.cover.type > 1" class="thumb-box">
        <img  class="thumb"
          v-for="(str,index) in artObj.cover.images"
          :key="index"
          v-lazy="str">
      </div>
    </template>
      <template #label>
      <div class="label-box" >
        <span>{{ artObj.aut_name }}&nbsp;&nbsp;&nbsp;{{ artObj.comm_count }}评论&nbsp;&nbsp;&nbsp;{{ $timeTo(artObj.pubdate) }}</span>
        <van-icon name="cross" @click.stop="show=true" v-show="closeShow"/>
      </div>
    </template>
    </van-cell>
    <van-action-sheet v-model="show"
     :actions="actions"
     @select="onSelect"
     cancel-text="取消"
     get-container="body"/>
  </div>
</template>

<script>
export default {
  data () {
    return {
      show: false,
      actions: [],
      oldActions: [{ name: '不感兴趣' }, { name: '反馈垃圾内容' }, { name: '拉黑作者' }]
    }
  },
  created () {
    this.actions = this.oldActions // 默认一套反馈面板数据
  },
  props: {
    artObj: Object,
    closeShow: {
      type: Boolean,
      default: true
    }
  },
  methods: {
    onSelect (action) {
      if (action.name === '反馈垃圾内容') {
        this.actions = [
          {
            value: -1,
            name: '返回'
          },
          {
            value: 0,
            name: '其它问题'
          },
          {
            value: 1,
            name: '标题夸张'
          },
          {
            value: 2,
            name: '低俗色情'
          },
          {
            value: 3,
            name: '错别字多'
          },
          {
            value: 4,
            name: '旧闻重复'
          },
          {
            value: 6,
            name: '内容不实'
          },
          {
            value: 8,
            name: '侵权'
          },
          {
            value: 5,
            name: '广告软文'
          },
          {
            value: 7,
            name: '涉嫌违法犯罪'
          }
        ]
      } else if (action.name === '返回') {
        this.actions = this.oldActions
      } else {
        // 删除文章,需要子传父
        this.$emit('remove', this.artObj.art_id, action.value)
      }
    }
  }
}
</script>

<style scoped lang="less">
.title-box { // 标题样式
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.label-box { // label描述样式
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.thumb {
  // 矩形黄金比例：0.618
  width: 113px;
  height: 70px;
  background-color: #f8f8f8;
  object-fit: cover;
}

.thumb-box {
  display: flex;
  justify-content: space-between;
}
</style>
